// 气泡

@function sample($list) {
  @return nth($list, random(length($list)));
}

// 上升气泡
@mixin bubbleRise2($dur:sample((16, 15, 18, 19)), $bg:sample((#6aa2cc, #890E4B, #00F1A1, #22E8EC)), $scale:sample((0.5, 0.6, 0.7, 0.8, 0.9, 1))) {
  animation: animateT #{$dur}s linear infinite;
  // 动画播放次数
  animation-iteration-count: 1;
  // 设置动画为反向播放 
  animation-direction: normal;
  // 动画结束的最后一帧
  animation-fill-mode: forwards;
  border-color: $bg;
  box-shadow: inset 0 0 24px $bg;
  // 子元素需要使用
  --bgColor: #{$bg};

  transform: scale($scale);

  @keyframes animateT {
    0% {
      bottom: -200px;
    }

    100% {
      bottom: 1000px;
      display: none;
    }
  }
}

// 上下漂浮气泡
@mixin bubbleRise($dur:sample((5, 6, 7, 8)), $bg:sample((#6aa2cc, #890E4B, #00F1A1, #22E8EC)), $scale:sample((0.5, 0.6, 0.7, 0.8, 0.9, 1))) {
  // 动画播放次数
  animation-iteration-count: 1;
  // 设置动画为反向播放 
  animation-direction: normal;
  // 动画结束的最后一帧
  animation-fill-mode: forwards;
  border-color: $bg;
  box-shadow: inset 0 0 24px $bg;
  // 子元素需要使用
  --bgColor: #{$bg};
  $width: sample((80px, 90px, 100px, 110px, 120px));
  width: $width;
  height: $width;
}

@keyframes animateT1 {
  0% {
    transform: translateX(7%) translateY(5%);
  }

  25% {
    transform: translateX(32%) translateY(8%);
  }

  50% {
    transform: translateX(50%) translateY(30%);
  }

  75% {
    transform: translateX(7%) translateY(7%);
  }

  100% {
    transform: translateX(0%) translateY(3%);
  }
}

@keyframes animateT2 {
  0% {
    transform: translateX(7%) translateY(5%);
  }

  25% {
    transform: translateY(8%) translateX(32%);
  }

  50% {
    transform: translateX(50%) translateY(30%);
  }

  75% {
    transform: translateY(7%) translateX(9%);
  }

  100% {
    transform: translateX(0%) translateY(7%);
  }
}

@keyframes animateT3 {
  0% {
    transform: translateY(5%) translateX(7%);
  }

  25% {
    transform: translateX(32%) translateY(-8%);
  }

  50% {
    transform: translateX(50%) translateY(30%);
  }

  75% {
    transform: translateX(7%) translateY(7%);
  }

  100% {
    transform: translateX(0%) translateY(3%);
  }
}

.bubble {
  position: absolute;
  background: transparent;
  border-radius: 50%;
  border: 1px solid;
  box-shadow: inset 0 0 24px #fff;
  z-index: 99;


  &.rise1 {
    @include bubbleRise();
    left: 4%;
    top: 10%;
    animation: animateT1 5s linear infinite;
  }

  &.rise2 {
    @include bubbleRise();
    left: 10%;
    top: 25%;
    animation: animateT2 5s linear infinite;

  }

  &.rise3 {
    @include bubbleRise();
    left: 32%;
    top: 40%;
    animation: animateT3 5s linear infinite;
  }

  &.rise4 {
    @include bubbleRise();
    left: 50%;
    top: 1%;
    animation: animateT1 5s linear infinite;

  }

  &.rise5 {
    @include bubbleRise();
    left: 30%;
    top: 18%;
    animation: animateT2 5s linear infinite;

  }

  &.rise6 {
    @include bubbleRise();
    left: 8%;
    top: 45%;
    animation: animateT2 5s linear infinite;

  }

  &.rise7 {
    @include bubbleRise();
    left: 55%;
    top: 18%;
    animation: animateT1 5s linear infinite;

  }

  &.rise8 {
    @include bubbleRise();
    left: 72%;
    top: 9%;
    animation: animateT3 5s linear infinite;

  }

  &.rise9 {
    @include bubbleRise();
    left: 52%;
    top: 38%;
    animation: animateT1 5s linear infinite;

  }

  &.rise10 {
    @include bubbleRise();
    left: 82%;
    top: 36%;
    animation: animateT2 5s linear infinite;

  }
}